<template>
  <div class="top-text"><span></span>{{ topText }}</div>
  <p class="login">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="登录" name="login">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="" prop="name"
            ><el-input
              v-model="ruleForm.name"
              placeholder="请输入手机号码"
            ></el-input
          ></el-form-item>

          <el-form-item label="" prop="pass"
            ><el-input
              type="password"
              v-model="ruleForm.pass"
              auto-complete="off"
              placeholder="请输入密码"
            ></el-input
          ></el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
        <div>
          <div class="bottom-text">
            <el-checkbox v-model="checked">下次自动登录</el-checkbox>
            <div class="right">
              <span class="lostPass">忘记密码</span>
              <el-divider direction="vertical"></el-divider>
              <span class="registerNow">立即注册</span>
            </div>
          </div>
          <div class="social-login">
            <p>使用社交账号登录</p>
            <img src="~assets/img/bgc/qqLogin.png" alt="" />
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="注册" name="register">
        <register></register>
      </el-tab-pane>
    </el-tabs>
  </p>
</template> 

<script>
import Register from "./Register.vue";

export default {
  name: "Login",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }

        callback();
      }
    };

    return {
      activeName: this.$route.path == "/user/login" ? "login" : "register",
      ruleForm: {
        name: "",
        pass: "",
        checkPass: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入您的手机号码", trigger: "blur" },
          { max: 11, message: "长度在 11 个字符", trigger: "blur" },
        ],
        pass: [{ required: true, validator: validatePass, trigger: "blur" }],
      },
      checked: true,
    };
  },
  computed: {
    topText() {
      if (this.$route.path == "/user/login") {
        return "云屯蹲号账号登录";
      } else {
        return "云屯蹲号账号注册";
      }
    },
  },
  methods: {
    //选项卡切换
    handleClick(tab, event) {
      this.$router.replace("/user/" + this.activeName);
    },
    //提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            type: "success",
            message: "登录成功",
          });
          this.$router.push("home");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  components: {
    Register,
  },
};
</script>

<style scoped>
.top-text {
  color: #212222;
  font-size: 14px;
  margin-bottom: 15px;
}
.top-text > span {
  display: inline-block;
  background-color: var(--color-tint);
  width: 14px;
  height: 16px;
  vertical-align: middle;
}
.login {
  margin: 0 auto;
}
.el-tabsitem {
  text-align: center;
  width: 60px;
}
/deep/.el-tabs__header {
  margin-bottom: 40px;
}
/deep/.el-tabs__item {
  color: #979797;
  width: 143px;
  text-align: center;
}
/deep/.is-active {
  color: #212222 !important;
}
/deep/.el-tabs__item:hover {
  color: #212222;
}

/deep/.el-tabs__active-bar {
  background-color: #212222 !important;
}
/deep/.el-form-item__content {
  margin-left: 0px !important;
}
/deep/.el-input__inner {
  background-color: #f4f4f4;
}
/deep/.el-button {
  width: 100%;
  background-color: var(--color-tint);
  border-color: var(--color-tint);
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: var(--color-tint);
  border-color: var(--color-tint);
}
/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #212222;
}
.bottom-text {
  font-size: 13px;
}
.lostPass {
  height: 18.4px;
  line-height: 18.4px;
}
.social-login {
  padding: 25px 10px;
  text-align: center;
}
</style>